<template>
	<view class="my-container">
		<view class="top">
			<view></view>
			<view>
				<view @click="toggle">
					<image :draggable="false" :src="loginUserInfo.faceBigImg ? loginUserInfo.faceBigImg : '../../../static/img/defaulthead.jfif'"></image>
				</view>
				<view>
					<view>
						<text v-text="loginUserInfo ? loginUserInfo.nickname : ''"></text>
					</view>
					<view>
						<view>
							<text>账号：{{loginUserInfo ? loginUserInfo.username : ''}}</text>
						</view>
						<view>
							<view @click="toUserInfo">
								<uni-icons custom-prefix="iconfont" style="margin-right: 8px;color: gray;" type="icon-erweima" size="24"></uni-icons>
								<uni-icons style="color: gray;" type="right" size="24"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view></view>
		</view>
		<view class="bottom">
			<uni-list>
				<uni-list-item class="list-item" style="margin-top: 4px;background-color: gray;" title="设置"
					:show-extra-icon="true" :extra-icon="{color: 'gray', size: '22', type: 'set'}"></uni-list-item>
				<uni-list-item :show-badge="true" badge-text="12" title="列表文字"></uni-list-item>
				<uni-list-item :show-switch="true" title="列表禁用状态"></uni-list-item>
				<uni-list-item :disabled="true" title="列表禁用状态"></uni-list-item>
				<uni-list-item note="列表描述信息" title="列表禁用状态"></uni-list-item>
				<uni-list-item title="列表左侧带略缩图" note="列表描述信息"
					thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="lg"
					rightText="右侧文字"></uni-list-item>
				<uni-list-item :show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'right'}"
					title="列表左侧带扩展图标"></uni-list-item>
				<uni-list-item title="退出登录" clickable @click="logout()"></uni-list-item>
				<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index"
					@click="onClick($event,1)"></uni-list-item>
				<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index"
					@click="onClick($event,1)"></uni-list-item>
				<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index"
					@click="onClick($event,1)"></uni-list-item>
				<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index"
					@click="onClick($event,1)"></uni-list-item>
				<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index"
					@click="onClick($event,1)"></uni-list-item>
				<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index"
					@click="onClick($event,1)"></uni-list-item>
			</uni-list>
		</view>
		
		
		
		<!-- 弹出框组件 -->
		<!-- 选择头像弹出框 -->
		<uni-popup style="z-index: 999;" ref="popup" border-radius="10px 10px 0 0" background-color="#fff">
			<view style="height: 135px;">
				<button style="display: block;height: 45px;" @click="chooseHead('album')">从相册选择</button>
				<button style="display: block;" @click="chooseHead('camera')">拍摄</button>
				<button style="display: block;" @click="$refs.popup.close()">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginUserInfo: null
			}
		},
		methods: {
			/**
			 * 退出登录
			 */
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定退出登录？',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.removeStorageSync('login-user-info')
							uni.redirectTo({
								url: '/pages/index/index'
							})
						} else if (res.cancel) {

						}
					}
				});

			},
			/** 
			 * 从相册选择头像图片并上传
			 */
			chooseHead(source) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: [`${source}`],
					success: res => {
						this.$upload('/file/upload', res.tempFilePaths[0], {isCreateThumb: true}).then(
							succ => {
								if (succ.code === 200) {
									// 上传文件服务器成功， 修改用户头像路径
									let data = {
										userId: this.loginUserInfo.id,
										imgPath: succ.data.thumbImagePath,
										bigImgPath: succ.data.bigImagePath
									}
									this.$http('/user/modifyHead','post',data).then(
										res =>{
											if (res.code === 200) {
												uni.showToast({
													title: '上传成功'
												})
												// 重新获取登录用户信息，刷新用户头像
												this.$http('/security/obtainLoginUserInfo','get').then(
													succ => {
														if (succ.code === 200) {
															// 存储登录用户信息
															uni.setStorageSync('login-user-info',JSON.stringify(succ.data))
														}
													}
												)
											} else {
												// 如果修改数据库失败，则删除掉文件服务器上传成功的图像
												this.$http('/file/delete', 'post', {filePath: data.imgPath})
												this.$http('/file/delete', 'post', {filePath: data.bigImgPath})
											}
										}
									)
								}
								this.$refs.popup.close()
							}
						)
					}
				})
			},
			/** 
			 * 打开popup组件
			 * @param {Object} type
			 */
			toggle() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('bottom')
			},
			/**
			 * 跳转用户信息页面
			 */
			toUserInfo() {
				uni.navigateTo({
					url: '/pages/tabbar/my/navpage/QRcode'
				})
			}
		},
		onLoad() {
			this.loginUserInfo = JSON.parse(uni.getStorageSync('login-user-info'))
		},
		onLaunch() {
			console.log('my launch')
		},
		onShow() {
			console.log('my show')
		},
		onHide() {
			console.log('my hide')
		},
		onInit() {
			console.log('my init')
		},

	}
</script>

<style scoped lang="scss">
	.my-container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}


	.top {
		flex: 1;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid gray;

		&>view:nth-child(1) {
			flex: 2;
		}

		&>view:nth-child(2) {
			flex: 3;
			display: flex;

			&>view:nth-child(1) {
				flex: 2;
				display: flex;
				justify-content: center;

				&>image {
					height: 100%;
					width: 70%;
					aspect-ratio: 1/1;
					border-radius: 10px;
					border: 1px solid gray;
				}
			}

			&>view:nth-child(2) {
				flex: 4;
				display: flex;
				flex-direction: column;

				&>view:nth-child(1) {
					flex: 1;
					position: relative;

					&>text {
						position: absolute;
						bottom: 0;
						font-weight: bolder;
						font-size: 24px;
					}
				}

				&>view:nth-child(2) {
					flex: 1;
					display: flex;

					&>view:nth-child(1) {
						position: relative;
						flex: 7;

						&>text {
							position: absolute;
							bottom: 0;
							color: gray;
						}
					}

					&>view:nth-child(2) {
						flex: 3;
						position: relative;

						&>view {
							position: absolute;
							bottom: 0;
							right: 3px;
						}
					}
				}
			}
		}

		&>view:nth-child(3) {
			flex: 1;
		}
	}

	.bottom {
		flex: 3;
		overflow: auto;

		& .list-item {
			background-color: goldenrod;
		}
	}
</style>